<template>
  <div class="app-container">
    <el-card class="tableset" shadow="never" :body-style="{ padding: '0px' }">
      <!-- 小标题 -->
      <div>
        <span class="title">用户管理</span>
      </div>
      <!-- 小标题 -->

      <!-- 搜索关键词 -->
      <div class="funtion">
        <el-input
          v-model="get_wechat_user_info_list.keyword"
          placeholder="请输入关键词"
          class="input-with-select"
          clearable
          @keyup.enter.native="getWechatUserInfoList"
        >
          <el-select
            slot="prepend"
            v-model="get_wechat_user_info_list.keywordType"
            placeholder="请选择"
            class="option"
          >
            <el-option label="用户昵称" value="0" />
            <el-option label="联系电话" value="1" />
            <el-option label="默认配送地址" value="2" />
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="getWechatUserInfoList" />
        </el-input>
      </div>
      <!-- 搜索关键词 -->

      <!-- 数据表 -->
      <el-table
        v-loading="dataRequestLoading"
        element-loading-text="正在加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        :data="data_wechat_user_info_list.data"
        class="table"
        highlight-current-row
        style="width: 100%;"
        :height="tableHeight"
        :max-height="tableHeight"
        @sort-change="changeSort"
        @filter-change="changefilter"
        @selection-change="getSelection"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="avatar_url" label="用户头像">
          <template slot-scope="{ row }">
            <el-image :src="row.avatar_url" style="width:60px;height:60px" :preview-src-list="[row.avatar_url]" />
          </template>
        </el-table-column>
        <el-table-column prop="nick_name" label="用户昵称" />
        <!--        <el-table-column prop="language" label="语言"></el-table-column>-->
        <!--        <el-table-column prop="name" label="收货名"></el-table-column>-->
        <el-table-column prop="name" label="真实姓名" />
        <el-table-column prop="telephone" label="电话号码" />
        <el-table-column prop="area" label="绑定所在区域" />
        <el-table-column
          :filters="[{ text: '未设置', value: '0' }, { text: '男', value: '1' }, { text: '女', value: '2' }]"
          :filter-multiple="false"
          column-key="filterGender"
          label="性别"
          width="60px"
        >
          <template slot-scope="{ row }">
            <span>{{ gender_text(row.gender) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="shipping_address" width="200px" label="默认配送地址" />
        <el-table-column prop="promoter_wechat_user_id" label="推广人微信id" />
        <el-table-column prop="account_balance" label="账户金额" />
        <el-table-column prop="add_up_expenditure" label="累计消费" sortable="custom" column-key="add_up_expenditure" />
        <!-- <el-table-column prop="status" label="状态" /> -->
        <el-table-column
          :filters="[{ text: '停用', value: '0' }, { text: '启用', value: '1' }]"
          :filter-multiple="false"
          column-key="filterStatus"
          label="状态"
        >
          <template slot-scope="{ row }">
            <el-tag :type="status[row.status].color" effect="dark">{{ status[row.status].label }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="注册日期" width="100" />
        <el-table-column fixed="right" label="操作" width="244">
          <template slot-scope="{ row }">
            <el-button @click="top_up_balance.wechat_user_id = row.wechat_user_id;rechargeDialog = true">充值</el-button>
            <el-button @click="getWechatUserExpenditureRecord(row.wechat_user_id)">消费记录</el-button>
            <el-button
              v-permission="['customer-change']"
              type="primary"
              @click="openDetailsDialog(row)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 数据表 -->

      <!-- 数据表左下方功能区 -->
      <div>
        <el-button
          type="success"
          class="card-bottom-button-left"
          icon="el-icon-check"
          plain
          :disabled="startDisabled"
          @click="changeWechatUserStatus(1)"
        >启用</el-button>
        <el-button
          type="warning"
          class="card-bottom-button-left"
          icon="el-icon-minus"
          plain
          :disabled="stopDisabled"
          @click="changeWechatUserStatus(0)"
        >停用</el-button>
      </div>
      <!-- 数据表左下方功能区 -->

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        background
        layout="total, sizes,prev, pager, next, jumper"
        :total="data_wechat_user_info_list.total"
        :page-size="get_wechat_user_info_list.pageSize"
        :page-sizes="[20, 50, 100]"
        :current-page="get_wechat_user_info_list.currentPage"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      />
      <!-- 分页 -->
    </el-card>

    <!-- 充值Dialog -->
    <el-dialog
      title="充值到用户"
      :visible.sync="rechargeDialog"
      width="500px"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-form ref="rechargeForm" :model="top_up_balance" status-icon size="mini" label-width="100px">
        <el-form-item prop="change_amount" :rules="rules.input" label="充值金额">
          <el-input v-model="top_up_balance.change_amount" type="number" placeholder="请输入充值金额" clearable />
        </el-form-item>
        <el-form-item label="额外充值金额">
          <el-input v-model="top_up_balance.extra_amount" type="number" placeholder="请输入额外充值金额" clearable />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="top_up_balance.remark" type="textarea" placeholder="请输入操作备注" clearable />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="rechargeDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="topUpBalance">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 充值Dialog -->

    <!--异步查询消费记录Dialog-->
    <el-dialog
      title="消费记录"
      :visible.sync="rechargeRecordDialog"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-table
        v-loading="dialogDataRequestLoading"
        element-loading-text="正在加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        :data="data_wechat_user_expenditure_record.data"
        highlight-current-row
        :height="tableHeight"
        :max-height="tableHeight"
        style="width: 100%;"
      >
        <el-table-column prop="payment_serial_number" label="支付流水号" />
        <el-table-column prop="print_order_number" label="云打印/需求订单号">
          <template slot-scope="{ row }">
            <span v-if="row.print_order_number !== null">{{ row.print_order_number }}</span>
            <span v-else-if="row.demand_order_number !== null">{{ row.demand_order_number }}</span>
            <span v-else>暂无</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="消费类型">
          <template slot-scope="{ row }">
            <span>{{ type[row.type].label }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变动金额">
          <template slot-scope="{ row }">
            <el-tag :type="row.change_amount >= 0 ? 'success' : 'danger'">{{ row.change_amount > 0 ? '+' + row.change_amount : row.change_amount }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="extra_amount" label="额外变动金额">
          <template slot-scope="{ row }">
            <el-tag v-if="row.extra_amount > 0" :type="row.extra_amount > 0 ? 'success' : 'danger'">{{ '+' + row.extra_amount }}</el-tag>
            <span v-else>{{ row.extra_amount > 0 ? '+' + row.extra_amount : row.extra_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="create_time" label="创建时间" />
        <el-table-column label="操作" width="115px">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              class="normal-button"
              icon="el-icon-edit"
              size="mini"
              @click.stop="openRechargeRecordRemarkDialog(row)"
            >编辑备注</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页Dialog -->
      <el-pagination
        class="pagination"
        background
        layout="total, sizes,prev, pager, next, jumper"
        :total="data_wechat_user_expenditure_record.total"
        :page-size="get_wechat_user_expenditure_record.pageSize"
        :page-sizes="[20, 50, 100]"
        :current-page="get_wechat_user_expenditure_record.currentPage"
        @size-change="changePageSizeDialog"
        @current-change="changeCurrentPageDialog"
      />
      <!-- 分页Dialog -->

      <!-- 内层修改消费记录备注dialog -->
      <el-dialog
        title="编辑备注"
        :visible.sync="rechargeRecordRemarkDialog"
        width="500px"
        :close-on-click-modal="false"
        append-to-body
      >
        <el-form status-icon size="mini" label-width="80px">
          <el-form-item label="备注">
            <el-input v-model="change_wechat_user_expenditure_record_remark.remark" type="textarea" placeholder="请输入操作备注" clearable />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="rechargeRecordRemarkDialog = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="changeWechatUserExpenditureRecordRemark">保 存</el-button>
        </span>
      </el-dialog>
      <!-- 内层修改消费记录备注dialog -->
    </el-dialog>
    <!--异步查询消费记录Dialog-->

    <!--详情Dialog-->
    <el-dialog
      title="客户详情"
      :visible.sync="detailsDialog"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form size="mini" label-width="80px">
        <el-form-item prop="nick_name" size="mini" label="用户昵称">
          <span size="mini">{{ change_wechat_user_info.nick_name }}</span>
        </el-form-item>
        <el-form-item prop="avatar_url" size="mini" label="用户头像">
          <img :src="change_wechat_user_info.avatar_url" width="60" height="60">
        </el-form-item>
        <el-form-item prop="area" size="mini" label="绑定所在区域">
          <span size="mini">{{ change_wechat_user_info.area }}</span>
        </el-form-item>
        <el-form-item prop="language" size="mini" label="语言">
          <span size="mini">{{ change_wechat_user_info.language }}</span>
        </el-form-item>
        <el-form-item prop="name" size="mini" label="真实姓名">
          <el-input v-model="change_wechat_user_info.name" size="mini" placeholder="请输入收货名" />
        </el-form-item>
        <el-form-item prop="telephone" size="mini" label="电话号码">
          <el-input v-model="change_wechat_user_info.telephone" size="mini" placeholder="请输入电话号码" />
        </el-form-item>
        <el-form-item prop="gender" size="mini" label="性别">
          <el-select v-model="change_wechat_user_info.gender" placeholder="请选择性别">
            <el-option
              v-for="item in gender"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="shipping_address" size="mini" label="默认配送地址">
          <span size="mini">{{ change_wechat_user_info.shipping_address }}</span>
        </el-form-item>
        <el-form-item prop="promoter_wechat_user_id" size="mini" label="推荐人id">
          <span size="mini">{{ change_wechat_user_info.promoter_wechat_user_id }}</span>
        </el-form-item>
        <el-form-item prop="promoter_wechat_user_id" size="mini" label="账户金额">
          <span size="mini">{{ change_wechat_user_info.account_balance }}</span>
        </el-form-item>
        <el-form-item prop="promoter_wechat_user_id" size="mini" label="累计消费">
          <span size="mini">{{ change_wechat_user_info.add_up_expenditure }}</span>
        </el-form-item>
        <el-form-item prop="promoter_wechat_user_id" size="mini" label="状态">
          <el-radio-group v-model="change_wechat_user_info.status">
            <el-radio-button :label="1">启用</el-radio-button>
            <el-radio-button :label="0">停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="create_time" size="mini" label="生成时间">
          <span size="mini">{{ change_wechat_user_info.create_time }}</span>
        </el-form-item>
        <el-form-item prop="modified_time" size="mini" label="修改时间">
          <span size="mini">{{ change_wechat_user_info.modified_time }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="detailsDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="changeWechatUserInfo">保 存</el-button>
      </span>
    </el-dialog>
    <!--详情Dialog-->
  </div>
</template>

<script>
import {
  getWechatUserInfoList,
  changeWechatUserInfo,
  getWechatUserExpenditureRecord,
  changeWechatUserStatus,
  topUpBalance,
  changeWechatUserExpenditureRecordRemark
} from '@/api/customer-manage'

export default {
  name: 'Index',
  data() {
    return {
      // table高度自适应
      tableHeight: window.innerHeight - 265,

      // loading开关
      dataRequestLoading: false,
      dialogDataRequestLoading: false,

      // 按钮开关
      startDisabled: true,
      stopDisabled: true,
      // dialog
      rechargeDialog: false,
      detailsDialog: false,
      orderRemarkDialog: false,
      refundDialog: false,
      // 消费记录Dialog
      rechargeRecordDialog: false,
      rechargeRecordRemarkDialog: false,
      // 性别显示
      gender: [
        { value: 0, label: '未设置' },
        { value: 1, label: '男' },
        { value: 2, label: '女' }
      ],
      type: {
        0: { label: '直接消费' },
        1: { label: '余额消费' },
        2: { label: '余额提现' },
        3: { label: '充值余额' },
        4: { label: '退款到余额' },
        5: { label: '直接退款' },
        6: { label: '接单收入' },
        7: { label: '日常支出' }
      },
      status: {
        0: { color: 'danger', label: '停用' },
        1: { color: 'success', label: '启用' }
      },
      // 修改参数
      change_wechat_user_info: {
        wechat_user_id: '',
        telephone: '',
        name: '',
        gender: '',
        shipping_address: '',
        area: '',
        area_id: '',
        avatar_url: '',
        create_time: '',
        is_have_order: '',
        language: '',
        modified_time: '',
        nick_name: '',
        promoter_wechat_user_id: '',
        shipping_address_id: '',
        account_balance: '',
        add_up_expenditure: '',
        status: ''
      },
      value: '',
      // 发送请求参数
      get_wechat_user_info_list: {
        pageSize: 20,
        currentPage: 1,
        keyword: '',
        keywordType: '0',
        sort_name: '',
        sort: 'desc',
        filterGender: '',
        filterStatus: ''
      },
      // 返回值
      data_wechat_user_info_list: {
        data: [],
        total: 0
      },
      // 异步查询微信用户消费记录列表请求参数
      get_wechat_user_expenditure_record: {
        wechat_user_id: '',
        pageSize: 20,
        currentPage: 1,
        sort_name: '',
        sort: 'desc'
      },

      // 异步查询微信用户消费记录 返回值
      data_wechat_user_expenditure_record: {
        data: [],
        total: 0
      },
      // 充值余额发送请求参数
      top_up_balance: {
        wechat_user_id: '',
        change_amount: '',
        extra_amount: '',
        remark: ''
      },
      // 消费记录备注请求参数
      change_wechat_user_expenditure_record_remark: {
        expenditure_record_id: '',
        remark: ''
      },
      // 表单校验规则
      rules: {
        input: { required: true, message: '请完成输入！', trigger: 'blur' },
        select: { required: true, message: '请完成选择！', trigger: 'blur' },
        image: { required: true, message: '请上传图片！', trigger: 'blur' }
      }
    }
  },
  mounted() {
    this.getWechatUserInfoList() // 查询微信用户信息列表
  },
  methods: {
    // 图片地址拼接
    getPath() {
      return process.env.VUE_APP_BASE_API
    },
    // 查询微信用户信息列表
    getWechatUserInfoList() {
      this.dataRequestLoading = true
      getWechatUserInfoList(this.get_wechat_user_info_list).then(res => {
        this.data_wechat_user_info_list.data = res.result.showing
        this.data_wechat_user_info_list.total = res.result.total
        this.dataRequestLoading = false
      })
    },
    // 性别显示
    gender_text(data) {
      const gender = this.gender.filter(v => {
        if (v.value === data) {
          return v.label
        }
      })
      return gender[0].label
    },
    // 修改微信用户信息
    changeWechatUserInfo() {
      changeWechatUserInfo(this.change_wechat_user_info).then(res => {
        this.getWechatUserInfoList()
        this.detailsDialog = false
        this.$notify({
          title: '成功',
          message: '保存客户信息成功！',
          type: 'success'
        })
      })
    },

    // 获取选择项
    getSelection(selection) {
      if (selection.length === 0) {
        this.startDisabled = true
        this.stopDisabled = true
      } else {
        this.startDisabled = false
        this.stopDisabled = false
      }
      this.selection = selection
    },

    // 批量更改微信用户账号状态
    changeWechatUserStatus(type) {
      this.$confirm('此操作将改变所选中的客户的状态，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const arr = []
        this.selection.forEach(val => {
          arr.push(val.wechat_user_id)
        })
        changeWechatUserStatus({ status: type, wechat_user_id: arr }).then(res => {
          this.getWechatUserInfoList()
          this.$notify({
            title: '成功',
            message: '修改客户状态成功！',
            type: 'success'
          })
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消操作' })
      })
    },

    // 打开编辑用户信息dialog
    openDetailsDialog(row) {
      this.change_wechat_user_info = {
        wechat_user_id: row.wechat_user_id,
        telephone: row.telephone,
        name: row.name,
        gender: row.gender,
        shipping_address: row.shipping_address,
        area: row.area,
        area_id: row.area_id,
        avatar_url: row.avatar_url,
        create_time: row.create_time,
        is_have_order: row.is_have_order,
        language: row.language,
        modified_time: row.modified_time,
        nick_name: row.nick_name,
        promoter_wechat_user_id: row.promoter_wechat_user_id,
        shipping_address_id: row.shipping_address_id,
        account_balance: row.account_balance,
        add_up_expenditure: row.add_up_expenditure,
        status: row.status
      }
      this.detailsDialog = true
    },
    // 切换每页条数方法
    changePageSize(data) {
      this.get_wechat_user_info_list.pageSize = data
      this.getWechatUserInfoList()
    },

    // 切换页码方法
    changeCurrentPage(data) {
      this.get_wechat_user_info_list.currentPage = data
      this.getWechatUserInfoList()
    },
    // 异步查询消费记录
    getWechatUserExpenditureRecord(data) {
      this.dialogDataRequestLoading = true
      this.get_wechat_user_expenditure_record.wechat_user_id = data
      getWechatUserExpenditureRecord(
        this.get_wechat_user_expenditure_record
      ).then(res => {
        this.data_wechat_user_expenditure_record = {
          data: res.result.showing,
          total: res.result.total
        }
        this.dialogDataRequestLoading = false
      })
      this.rechargeRecordDialog = true
    },
    // 打开微信童虎消费记录备注dialog
    openRechargeRecordRemarkDialog(row) {
      this.change_wechat_user_expenditure_record_remark = {
        expenditure_record_id: row.expenditure_record_id,
        remark: row.remark
      }
      this.rechargeRecordRemarkDialog = true
    },

    // 修改微信用户消费记录备注
    changeWechatUserExpenditureRecordRemark() {
      changeWechatUserExpenditureRecordRemark(this.change_wechat_user_expenditure_record_remark).then(res => {
        this.getWechatUserExpenditureRecord(this.get_wechat_user_expenditure_record.wechat_user_id)
        this.rechargeRecordRemarkDialog = false
        this.$notify({
          title: '成功',
          message: '保存用户消费记录备注成功！',
          type: 'success'
        })
      })
    },
    // 消费记录切换每页条数方法
    changePageSizeDialog(data) {
      this.get_wechat_user_expenditure_record.pageSize = data
      this.getWechatUserExpenditureRecord(
        this.get_wechat_user_expenditure_record.wechat_user_id
      )
    },

    // 消费记录切换页码方法
    changeCurrentPageDialog(data) {
      this.get_wechat_user_expenditure_record.currentPage = data
      this.getWechatUserExpenditureRecord(
        this.get_wechat_user_expenditure_record.wechat_user_id
      )
    },
    // 给用户充值余额
    topUpBalance() {
      this.$refs.rechargeForm.validate(valid => {
        if (valid) {
          topUpBalance(this.top_up_balance).then(res => {
            this.getWechatUserInfoList()
            this.top_up_balance.change_amount = ''
            this.top_up_balance.extra_amount = ''
            this.top_up_balance.remark = ''
            this.$notify({
              title: '成功',
              message: '充值成功！',
              type: 'success'
            })
            this.rechargeDialog = false
          })
        } else {
          return false
        }
      })
    },
    // 筛选记录者
    changefilter(filters) {
      if (filters.filterGender) {
        if (filters.filterGender.length === 0) {
          this.get_wechat_user_info_list.filterGender = ''
        } else {
          this.get_wechat_user_info_list.filterGender = filters.filterGender[0]
        }
      } else if (filters.filterStatus) {
        if (filters.filterStatus.length === 0) {
          this.get_wechat_user_info_list.filterStatus = ''
        } else {
          this.get_wechat_user_info_list.filterStatus =
            filters.filterStatus[0]
        }
      }
      this.getWechatUserInfoList()
    },
    // 更换排序
    changeSort({ column, order }) {
      switch (order) {
        case 'descending':
          this.get_wechat_user_info_list.sort_name = 'add_up_expenditure'
          this.get_wechat_user_info_list.sort = 'desc'
          this.getWechatUserInfoList()
          break
        case 'ascending':
          this.get_wechat_user_info_list.sort_name = 'add_up_expenditure'
          this.get_wechat_user_info_list.sort = 'asc'
          this.getWechatUserInfoList()
          break
        default:
          this.get_wechat_user_info_list.sort_name = ''
          this.get_wechat_user_info_list.sort = 'desc'
          this.getWechatUserInfoList()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .title-button-right {
    float: right;
    margin-right: 20px;
  }
</style>
